<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="4">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="变电站：" prop="station">
                <el-select v-model="formData.station" filterable clearable :style="{width: '100%'}">
                  <el-option
                    v-for="(item, index) in stationList"
                    :key="index"
                    :label="item.name"
                    :value="item.code"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="3">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="告警等级：" prop="gjdj">
                <el-select v-model="formData.gjdj" clearable :style="{width: '100%'}">
                  <el-option
                    v-for="(item, index) in gjdjOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.code"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="3">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="处理状态" prop="gjdj">
                <el-select v-model="formData.clzt" clearable :style="{width: '100%'}">
                  <el-option
                    v-for="(item, index) in clztOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.code"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="告警时间：" prop="time">
                <el-date-picker
                  type="date"
                  v-model="formData.time"
                  value-format="yyyy-MM-dd"
                  :style="{width: '100%'}"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <!-- <el-col :span="4">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="告警内容：" prop>
                <el-select
                  v-model="formData.alarm"
                  placeholder="请选择告警内容："
                  clearable
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="(item, index) in AlermStatusList"
                    :key="index"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>-->
        <el-col :span="4">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="告警来源：" prop="source">
                <el-select
                  v-model="formData.source"
                  placeholder="请选择告警来源"
                  clearable
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="(item, index) in AlarmSourceList"
                    :key="index"
                    :label="item.name"
                    :value="item.code"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="设备名称：" prop="name">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入设备名称"
                  clearable
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="2">
          <!-- <el-form-item size="large"> -->
          <el-button type="primary" @click="submitForm">查询</el-button>
          <!-- </el-form-item> -->
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script lang="ts">
import lodash from "lodash";
import { Component, Vue } from "vue-property-decorator";
import { publicAPIModule } from "@/store/modules/public";
// console.log(publicAPIModule)

@Component
export default class extends Vue {
  // 变电站列表
  get stationList() {
    let stationList = publicAPIModule.SubstationList || [];
    stationList = lodash.cloneDeep(stationList);
    let obj = {
      code: "",
      name: "全部",
    };
    stationList.unshift(obj);

    return stationList;
  }
  formData = {
    time: "",
    alarm: "",
    source: "",
    name: "",
    gjdj: "",
    clzt: "",
    station: "",
  };
  rules = {
    time: [],
    alarm: [],
    source: [],
    name: [],
    station: [],
    gjdj: [],
  };
  gjdjOptions = [
    {
      name: "全部",
      code: "",
    },
    {
      name: "事故",
      code: 1,
    },
    {
      name: "异常",
      code: 2,
    },
    {
      name: "越限",
      code: 3,
    },
    {
      name: "变位",
      code: 4,
    },
    {
      name: "告知",
      code: 5,
    },
  ];
  clztOptions = [
    {
      name: "全部",
      code: "",
    },
    {
      name: "未处理",
      code: "0",
    },
    {
      name: "已处理",
      code: "1",
    },
  ];
  get AlermStatusList() {
    let AlermStatusList = publicAPIModule.queryAlermStatusList || [];
    return AlermStatusList;
  }
  get AlarmSourceList() {
    let AlarmSourceList = publicAPIModule.AlarmSourceList || [];
    console.log(AlarmSourceList);
    return AlarmSourceList;
  }
  sourceOptions = [
    {
      label: "选项一",
      value: 1,
    },
    {
      label: "选项二",
      value: 2,
    },
  ];
  resetFormData(formData) {
    console.log(formData);
    this.formData = Object.assign({}, this.formData, formData);
    console.log(this.formData);
      }
  $refs!: {
    elForm: any;
  };
  mounted() {
    this.setForm();
    this.submitForm();
  }
  setForm() {
    let query = this.$route.query;
    
    let stationId: any = query.stationId || "";
    let formData = Object.assign({},this.formData,query)
    formData.station = stationId;
    this.formData = formData;
  }
  submitForm() {
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) return;
      // TODO 提交表单
      this.$emit("submit");
    });
  }
  // resetForm() {
  //   this.$refs.elForm.resetFields();
  // }
}
</script>

<style lang="scss" scoped>
</style>

